import React, { useState } from 'react';
import ProForm, {
  StepsForm,
  ProFormText,
  ProFormDatePicker,
  ProFormDateTimePicker,
  ProFormSelect,
  ProFormTextArea,
  ProFormCheckbox,
} from '@ant-design/pro-form';
import { Button, message, Modal } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { request } from 'umi';
import { api } from '@/global';

export default () => {
  const [visible, setVisible] = useState(false);
  return (
    <>
      <a onClick={() => setVisible(true)}>找回密码</a>
      <StepsForm
        onFinish={async (values) => {
          const { checkagain, password } = values;
          console.log('---------');

          if (checkagain != password) {
            message.error('请再次确认密码是否一致');
            return;
          }

          const result = await request(api.modifyPassword, {
            method: 'POST',
            data: {
              ...values,
            },
          });

          if (result.success) {
            message.success('修改成功');
            setVisible(false);
            return true;
          } else {
            message.error('修改失败');
            return;
          }
        }}
        formProps={{
          validateMessages: {
            required: '此项为必填项',
          },
        }}
        stepsFormRender={(dom, submitter) => {
          return (
            <Modal
              title="修改密码"
              width={800}
              onCancel={() => setVisible(false)}
              visible={visible}
              footer={submitter}
              destroyOnClose
            >
              {dom}
            </Modal>
          );
        }}
      >
        <StepsForm.StepForm
          name="base"
          title="检验信息"
          onFinish={async (values) => {
            const result = await request(api.canUpdateUserPassWord, {
              method: 'POST',
              data: {
                ...values,
              },
            });

            if (result.success) {
              return true;
            } else {
              message.error(result.errorMessage);
              return false;
            }
          }}
        >
          <ProFormText name="email" width="md" label="用户邮箱" rules={[{ required: true }]} />
          <ProFormText name="num" label="学号" width="md" rules={[{ required: true }]} />

          <ProFormText name="phone" label="手机号" width="md" rules={[{ required: true }]} />
        </StepsForm.StepForm>
        <StepsForm.StepForm name="checkbox" title="修改密码" onFinish={() => {}}>
          <ProFormText
            name="password"
            width="md"
            label="输入密码"
            tooltip="至少8个字符，至少1个大写字母，1个小写字母和1个数字,不能包含特殊字符（非数字字母）"
            placeholder="请输入密码"
            rules={[
              { required: true },
              {
                pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/,
                message: '密码格式错误',
              },
            ]}
          />
          <ProFormText
            name="checkagain"
            width="md"
            label="再次确认"
            placeholder="请输入密码"
            rules={[{ required: true }]}
          />
        </StepsForm.StepForm>
      </StepsForm>
    </>
  );
};
